<script>
import { ref, onMounted } from 'vue';
import { useWSStore } from "@/stores/common.js";
import axios from 'axios';

export default {
  setup() {
    const wsStore = useWSStore();

    const targetX = ref(100);
    const targetY = ref(1000);
    const speedX = ref(10);
    const speedY = ref(10);
    const speed = ref(10);
    const accelerate = ref(500);
    const decelerate = ref(500);


    const manualMove = (axis, direction) => {
      const payload = {
        Axis: axis,
        Direction: direction,
        Speed: speed.value,
        Accelerate: accelerate.value,
        Decelerate: decelerate.value
      };

      axios
          .post('/carrySystem/manualmove', payload)
          .then(response => {
            console.log('持续行驶成功');
          })
          .catch(error => {
            console.error('持续行驶失败', error);
          });
    };

    const automove = () => {
      const payload = {
        PositionX: targetX.value,
        PositionY: targetY.value,
        SpeedX: speedX.value,
        SpeedY: speedY.value,
        speed : 0,
        accelerate : 0,
        decelerate : 0
      };

      axios
          .post('/carrySystem/automove', payload)
          .then(response => {
            console.log('行驶成功');
          })
          .catch(error => {
            console.error('行驶失败', error);
          });
    };

    const stop = () => {
      axios
          .post('/carrySystem/stop')
          .then(response => {
            console.log('停止行驶成功');
          })
          .catch(error => {
            console.error('停止行驶失败', error);
          });
    };

    return {
      wsStore,
      targetX,
      targetY,
      speedX,
      speedY,
      speed,
      accelerate,
      decelerate,
      manualMove,
      automove,
      stop
    };
  }
};
</script>

<template>
  <div class="container">

    <div class="w-full h-1/5">
    <h1 class="text-3xl font-bold mb-4">天车系统</h1>
    </div>

    <div class="flex">
    <div class="w-1/3 h-4/5 mb-8">
      <div class="flex items-center mb-4">
        <label for="targetX" class="mr-2">X轴位置：</label>
        <el-input v-model="targetX" class="w-32"></el-input>
      </div>
      <div class="flex items-center mb-4">
        <label for="targetY" class="mr-2">Y轴位置：</label>
        <el-input v-model="targetY" class="w-32"></el-input>
      </div>
      <div class="flex items-center mb-4">
        <label for="speedX" class="mr-2">X轴速度：</label>
        <el-input v-model="speedX" class="w-32"></el-input>
      </div>
      <div class="flex items-center mb-4">
        <label for="speedY" class="mr-2">Y轴速度：</label>
        <el-input v-model="speedY" class="w-32"></el-input>
      </div>
      <el-button class="custom-button" type="primary" @click="automove">行驶到指定位置</el-button>
    </div>

    <div class="w-1/3 h-4/5 mb-8">
      <div class="flex items-center mb-4">
        <label for="speed" class="mr-2">速度：</label>
        <el-input v-model="speed" class="w-32"></el-input>
      </div>
      <div class="flex items-center mb-4">
        <label for="accelerate" class="mr-2">加速度：</label>
        <el-input v-model="accelerate" class="w-32"></el-input>
      </div>
      <div class="flex items-center mb-4">
        <label for="decelerate" class="mr-2">减速度：</label>
        <el-input v-model="decelerate" class="w-32"></el-input>
      </div>
      <div class="flex items-center mb-4">
        <el-button class="custom-button" type="primary" @mousedown="manualMove(0, false)" @mouseup="stop">X轴负向</el-button>
        <el-button class="custom-button" type="primary" @mousedown="manualMove(0, true)" @mouseup="stop">X轴正向</el-button>
      </div>
      <div class="flex items-center mb-4">
        <el-button class="custom-button" type="primary" @mousedown="manualMove(1, false)" @mouseup="stop">Y轴负向</el-button>
        <el-button class="custom-button" type="primary" @mousedown="manualMove(1, true)" @mouseup="stop">Y轴正向</el-button>
      </div>
    </div>

      <div class="w-1/3 h-4/5 mb-8">
        <div class="flex items-center mb-4">
          <label class="mr-2">天车连接状态：</label>
          <span>{{ wsStore.CSStatus ? '正常' : '错误' }}</span>
        </div>
        <div class="flex items-center mb-4">
          <label class="mr-2">X轴目前位置：</label>
          <span>{{ wsStore.CSPositionX }}</span>
        </div>
        <div class="flex items-center mb-4">
          <label class="mr-2">Y轴目前位置：</label>
          <span>{{ wsStore.CSPositionY }}</span>
        </div>
        <div class="flex items-center mb-4">
          <label class="mr-2">X轴目前速度：</label>
          <span>{{ wsStore.CSSpeedX }}</span>
        </div>
        <div class="flex items-center mb-4">
          <label class="mr-2">Y轴目前速度：</label>
          <span>{{ wsStore.CSSpeedY }}</span>
        </div>
      </div>

    </div>

    <div>
      <el-button class="custom-button" type="danger" @click="stop">停止行驶</el-button>
    </div>
  </div>>
</template>



<style>

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  background-color: #f1f1f1;
  border-radius: 8px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

label {
  font-weight: bold;
  margin-right: 8px;
}

.custom-button {
  color: #000000; /* 修改按钮字体颜色为黑色 */
}

.el-input {
  width: 200px;
}

.el-button {
  margin-top: 16px;
}
</style>